<template>
  <div>
    <Modal
      class="modify-dialog"
      :title="title"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleModalCancel"
      @on-ok="handleModalOk">
      <template v-if="value">
        <div class="iv-modal-head">
<!--          统计后台url  账号  密码-->
          <p>{{this.$t('m.tjUrl')}}：<a :href="diversionChannel.backgroundUrl" target="_blank">{{ diversionChannel.backgroundUrl }}</a></p>
          <p>{{this.$t('m.Account')}}：{{ diversionChannel.backgroundUser }}</p>
          <p>{{this.$t('m.backPassw')}}：{{ diversionChannel.backgroundPwd }}</p>
        </div>
        <div class="iv-modal-body">
          <div class="calendar-warning">
<!--            数字：代表渠道月度每天的注册数 , 点击当前天的区域，修改当前天的注册数 -->
            <p>1. <i class="square-red"></i>{{this.$t('m.fixSu')}}</p>
            <p>2. {{this.$t('m.djLocal')}}{{this.$t('m.rLstate')}}</p>
          </div>
          <Calendar
            class="event-calendar"
            v-model="today"
            :disabled-days-of-week="disabled"
            :format="format"
            :clear-button="clear"
            :placeholder="placeholder"
            :pane="1"
            :has-input="false"
            :on-day-click="onDayClick"
            :transfer="false"
            :change-pane="changePane">
            <div class="event" v-for="(evt, index) in events" :key="index" :slot="evt.date">
              {{evt.content}}
            </div>
          </Calendar>
        </div>
      </template>
    </Modal>
    <Modal
      v-model="regModal"
      :title="this.$t('m.fixReSu')"
      :width="360"
      footer-hide>
      <div>
<!--        修改真实注册数"  注册数  请输入注册数   取消  确认提交 -->
        <Form
          ref="regForm"
          :model="form"
          :rules="rules"
          :label-width="80"
          label-position="left">
          <FormItem :label="$t('m.subNum')" prop="registerNum">
            <Input type="text" :placeholder="$t('m.inputSuNum')" v-model="form.registerNum" />
          </FormItem>
          <FormItem style="margin-top: 48px;">
            <Button type="error"  @click="handleCancel" style="margin-right: 10px;">{{this.$t('m.cancel')}}</Button>
            <Button type="primary"  @click="handleSubmit" :loading="btnLoading">{{this.$t('m.submit')}}</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
  import qs from 'qs';
  import cn from '../lang/zh-CN';
  import lrz from 'lrz';
  import { deepCopy } from '@/libs/util';
  import Calendar from './Calendar.vue';

  export default {
    name: 'modalModify',
    props: {
      title: String,
      value: {
        type: Boolean,
        default: false
      },
      dcId: Number
    },
    data () {
      const validateNumber = (rule, value, callback) => {
        if (!Number.isInteger(value)) return callback(new Error('请输入数字'));
        return callback();
      }

      return {
        btnLoading: false,
        form: {
          registerNum: ''
        },
        rules: {
          registerNum: [
            { required: true, message: '请输入注册数', trigger: 'trigger' }
          ]
        },
        today: this.stringify(new Date()),
        format: 'yyyy-MM-dd',
        placeholder: 'placeholder is displayed',
        clear: true,
        events: [],
        disabled: [],
        calendarValue: '',
        registerNumList: [],
        id: '',
        diversionChannel: {},
        regModal: false,
        calendarYear: '',
        calendarMon: ''
      }
    },
    watch: {
      value (newValue) {
        if (newValue) {
          this.id = this.dcId;
        }
      }
    },
    created () {
      window.VueCalendarLang = (lang) => cn;
    },
    methods: {
      getDayCount (year, month) {
        const dict = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
        if (month === 1) {
          if ((year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0)) {
            return 29
          }
        }
        return dict[month]
      },
      onDayClick (date, str) {
        this.calendarValue = str;
        this.regModal = true;
      },
      changePane (year, month, pane) {
        this.events = [];
        this.calendarYear = year;
        this.calendarMon = month;
        let mon = month + 1;
        let date = `${year}-${mon < 10 ? '0' + mon : mon}`;
        this.$http.get(`/api/laocai/loan-market/stat/month?dcId=${this.id}&month=${date}`)
        // this.$http.get('/api/laocai/loan-market/stat/month')
        .then((Response) => {
          // this.diversionChannel = Response.body.result.diversionChannel

          if (Response.body.code == 0) {
             this.diversionChannel = Response.body.result.diversionChannel;
             this.registerNumList = Response.body.result.registerNumList || []
            this.events = this.getEventContent(year, month, pane, this.registerNumList);

            // this.diversionChannel = data.diversionChannel;
            // this.registerNumList = data.registerNumList || []
            // this.events = this.getEventContent(year, month, pane, this.registerNumList);
          }
        }, error => {
          console.log(error);
        });

      },
      getEventContent (year, month, pane, array) {
        const data = []
        for (let p = 0; p < pane; p++) {
          let date = new Date(year, month + p)
          let monthCounts = this.getDayCount(date.getFullYear(), date.getMonth())
          for (let i = 1; i <= monthCounts; i++) {
            data.push({
              date: this.stringify(new Date(year, month + p, i)),
              content: array[i-1]
            })
          }
        }
        return data
      },
      isDate (v) {
        if (v instanceof Date) {
          return true
        }
        return false
      },
      stringify (v) {
        if (!this.isDate(v)) return null
        return v.getFullYear() + '-' + this.filled(v.getMonth() * 1 + 1) + '-' + this.filled(v.getDate())
      },
      filled (v) {
        return String(v).replace(/^(\d)$/, '0$1')
      },
      // 表单提交
      handleSubmit () {
        const { regForm } = this.$refs;
        regForm.validate(valid => {
          if (valid) {
            this.btnLoading = true;
            this.$http.post('/api/laocai/loan-market/stat/update', {
              dcId: this.id,
              date: this.calendarValue,
              registerNum: this.form.registerNum
            })
            .then((Response) => {
              if (Response.body.code == 0) {
                this.$Message.success('修改注册数成功');
                regForm.resetFields();
                this.changePane(this.calendarYear, this.calendarMon, 1);
                this.handleModalOk();
                this.regModal = false;
              }
              this.btnLoading = false;
            }, error => {
              console.log(error.statusText);
            });
          }
        })
      },
      // modify-dialog cancel事件
      handleCancel () {
        this.$refs.regForm.resetFields();
        this.regModal = false;
      },
      // calendar-dialog cancel 事件
      handleModalCancel() {
        this.$emit('input', false);
      },
      // calendar-dialog ok 事件
      handleModalOk() {
        this.$emit('ok');
      }
    },
    components: {
      Calendar
    }
  }
</script>

<style lang="scss">

  .modify-dialog {
    .calendar-warning {
      margin-bottom: 10px;
      .square-red {
        display: inline-block;
        margin-right: 5px;
        width: 10px;
        height: 10px;
        background: #ed4014;
      }
    }
    .event-calendar {
      width: 100%;

      .datepicker-inner{
        width: 100%;
      }

      .datepicker-body{
        span{
          width: 60px;
          height: 60px;
          vertical-align: top;
        }

        .event{
          font-size: 12px;
          color: #ed4014;
        }

        .datepicker-monthRange span{
          width: 100px;
          height: 100px;
          vertical-align: middle;
          line-height: 100px;
          font-weight: 600;
        }
      }
    }
    .iv-modal-head {
      margin-bottom: 20px;
      a {
        color: #2d8cf0;
        text-decoration: underline;
      }
      p {
        margin-bottom: 5px;
        font-size: 14px;
      }
    }
  }
</style>
